<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>AddHouse</title>
    <link rel="stylesheet" href="/css/bootstrap.css">
    <script src="/js/jquery.js"></script>
    <script src="/js/distpicker.js"></script>
    <style>
        .top-buffer1{
            margin-top: 20px;
        }
        .top-buffer2{
            margin-top: 10px;
        }
    </style>
<body>
<div class="panel panel-success">
    <div class="panel-heading">
        <h3 class="panel-title top-buffer1" style="text-align: center">发布房屋信息</h3>
    </div>
        <form  class="row g-3" id="house_form" enctype="multipart/form-data" style="border: none">
            <!---隐藏的用户名-->
            <input type="text" name="userid" th:value="${session.user.userid}" style="display: none">
            <div class="row top-buffer1">
                <div class="col-md-4"></div>
            <div class="col-md-2">
                <label for="house_type" class="form-label">房型</label>
                    <select id="house_type" class="form-select" name="housetype">
                        <option  value="一居">一居</option>
                        <option  value="二居">二居</option>
                        <option  value="三居">三居</option>
                        <option  value="四居">四居</option>
                    </select>
            </div>
                <div class="col-md-2">
                <label for="house_price" class="form-label">房子价格</label>
                    <input id="house_price" class="form-control" name="houseprice">
                    <div class="col-md-2"></div>
                </div>
            </div>
                <div class="row top-buffer1">
                    <div class="col-md-4"></div>
                <div class="col-md-2">
                    <label for="house_size">房子面积</label>
                    <input id="house_size" class="form-control top-buffer" name="housesize">
                </div>
                    <div class="col-md-2">
                        <label for="house_age">房子年龄</label>
                        <input id="house_age" class="form-control top-buffer" name="houseage">
                    </div>
                </div>

                <div class="row top-buffer1">
                    <div class="col-md-4"></div>
                    <label class="col-md-8">房子家具</label>
                </div>
                <div class="row top-buffer2" >
                    <div class="col-md-4"></div>
                    <div class="col-md-1">
                            <input id="checkbox1" type="checkbox" class="form-check-input" value="床" name="housefuniture">
                            <label for="checkbox1" class="form-check-label">床</label>
                    </div>
                    <div class="col-md-1">
                        <input type="checkbox" id="checkbox2" class="form-check-input" value="衣柜" name="housefuniture">
                        <label for="checkbox2" class="form-check-label">衣柜</label>
                    </div>
                    <div class="col-md-1">
                        <input type="checkbox" id="checkbox3" class="form-check-input" value="沙发" name="housefuniture">
                        <label for="checkbox3" class="form-check-label">沙发</label>
                    </div>
                    <div class="col-md-1">
                        <input type="checkbox" id="checkbox4" class="form-check-input" value="电视" name="housefuniture">
                        <label for="checkbox4" class="form-check-label">电视</label>
                    </div>
                </div>
                    <div class="row top-buffer2">
                        <div class="col-md-4"></div>
                        <div class="col-md-1">
                            <input type="checkbox" id="checkbox5" class="form-check-input" value="冰箱" name="housefuniture">
                            <label for="checkbox5" class="form-check-label">冰箱</label>
                        </div>
                        <div class="col-md-1">
                            <input type="checkbox" id="checkbox6" class="form-check-input" value="洗衣机" name="housefuniture">
                            <label for="checkbox6" class="form-check-label">洗衣机</label>
                        </div>
                        <div class="col-md-1">
                            <input type="checkbox" id="checkbox7" class="form-check-input" value="空调" name="housefuniture">
                            <label for="checkbox7" class="form-check-label">空调</label>
                        </div>
                        <div class="col-md-1">
                            <input type="checkbox" id="checkbox8" class="form-check-input" value="热水器" name="housefuniture">
                            <label for="checkbox8" class="form-check-label">热水器</label>
                        </div>
                    </div>
                    <div class="row top-buffer2">
                        <div class="col-md-4"></div>
                        <div class="col-md-1">
                            <input type="checkbox" id="checkbox9" class="form-check-input" value="宽带" name="housefuniture">
                            <label for="checkbox9" class="form-check-label">宽带</label>
                        </div>
                        <div class="col-md-1">
                            <input type="checkbox" id="checkbox10" class="form-check-input" value="暖气" name="housefuniture">
                            <label for="checkbox10" class="form-check-label">暖气</label>
                        </div>
                        <div class="col-md-1">
                            <input type="checkbox" id="checkbox11" class="form-check-input" value="燃气灶" name="housefuniture">
                            <label for="checkbox11" class="form-check-label">燃气灶</label>
                        </div>
                        <div class="col-md-1">
                            <input type="checkbox" id="checkbox12" class="form-check-input" value="阳台" name="housefuniture">
                            <label for="checkbox12" class="form-check-label">阳台</label>
                        </div>
                    </div>
                    <div class="row top-buffer2">
                        <div class="col-md-4"></div>
                        <div class="col-md-1">
                            <input type="checkbox" id="checkbox13" class="form-check-input" value="卫生间" name="housefuniture">
                            <label for="checkbox13" class="form-check-label">卫生间</label>
                        </div>
                        <div class="col-md-1">
                            <input type="checkbox" id="checkbox14" class="form-check-input" value="智能门锁" name="housefuniture">
                            <label for="checkbox14" class="form-check-label">智能门锁</label>
                        </div>
                        <div class="col-md-1">
                            <input type="checkbox" id="checkbox15" class="form-check-input" value="油烟机" name="housefuniture">
                            <label for="checkbox15" class="form-check-label">油烟机</label>
                        </div>
                        <div class="col-md-1">
                            <input type="checkbox" id="checkbox16" class="form-check-input" value="可做饭" name="housefuniture">
                            <label for="checkbox16" class="form-check-label">可做饭</label>
                        </div>
                    </div>
            <div class="row top-buffer1">
                <div class="col-md-4"></div>
                <div class="col-md-4">
            <label for="distpicker">房子位置</label> <!--地址-->
            <div id="distpicker" data-toggle="distpicker">
                <select id="provinceName" name="province" class="form-select top-buffer2"></select>
                <select id="cityName" name="city" class="form-select"></select>
                <select id="districtName" name="district" class="form-select"></select>
            </div>
                </div>
            </div>
            <!---隐藏的用户名-->
            <div class="row top-buffer1">
                <div class="col-md-4"></div>
                <div class="col-md-4">
                    <label>房子名称</label>
                    <input type="text" class="form-control top-buffer2" id="house_name"
                           placeholder="请输入房子名称" name="housename">
                </div>
            </div>
            <div class="row top-buffer1">
                <div class="col-md-4"></div>
                <div class="col-md-4">
                    <label for="house_description">房子描述</label>
                    <textarea class="form-control top-buffer2" rows="3" placeholder="请输入内容" id="house_description" name="housedescription"></textarea>
                </div>
            </div>
            <div class="row top-buffer1">
                <div class="col-md-4"></div>
                <div class="col-md-4 file">
                    <label for="house_image">房屋图片:</label>
                    <input type="file" name="houseImage"  class="form-control top-buffer2" id="house_image" onchange="addNewContent()" multiple>
                </div>
            </div>
            <!--<div class="row top-buffer2">
                <div class="col-md-4"></div>
                <div class="col-md-4 content-img">
                    <ul class="container content-img-list">
                        <li class="content-img-list-item"><img id="img1" class="img-thumbnail rounded" width="300" height="200" alt="上传的图片" /><a class="delete-btn"><i class="ico-delete"></i></a></li>
                    </ul>
                </div>
            </div>-->
            <div class="row top-buffer2">
                <div class="col-md-4"></div>
                <div class="col-md-4" id="imageContainer">

                </div>
            </div>
                <div style="text-align: center">
                    <button class="btn btn-outline-dark" style="width: 20%;" type="button" onclick="addHouse()">发布</button>
                </div>
        </form>
    </div>
<script>
    var fileInput = document.getElementById("house_image");
    fileInput.addEventListener('change', function (event) {
        var input = event.target;
        var fileList = input.files;
        var imgName = new Array();
        var imgSrc = new Array();
        var imgFile = new Array();
        for(var i = 0; i < input.files.length; i++){
            var imgSrcI = getObjectURL(fileList[i]);
            imgName.push(fileList[i].name);
            imgSrc.push(imgSrcI);
            imgFile.push(fileList[i]);
        }
        for(var a = 0; a < imgSrc.length; a++){
            var img = document.createElement("img");
            img.setAttribute("id", "img" + a);
            img.src = imgSrc[a];
            var div1 = document.getElementById("imageContainer");
            img.style = "width:100px; height:100px";
            img.className = "img-thumbnail";
            div1.appendChild(img);
        }
    })


    function getObjectURL(file) {
        var url = null ;
        if (window.createObjectURL!=undefined) { // basic
            url = window.createObjectURL(file) ;
        } else if (window.URL!=undefined) { // mozilla(firefox)
            url = window.URL.createObjectURL(file) ;
        } else if (window.webkitURL!=undefined) { // webkit or chrome
            url = window.webkitURL.createObjectURL(file) ;
        }
        return url ;
    }
    function addHouse() {
        var formData = new FormData($("#house_form")[0]);
        for (var i = 0; i <$("#house_image")[0].files.length;i++){
            formData.append("file", $("#house_image")[0].files[i]);
        }
        $.ajax({
            url: "/house/insert",
            type: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            success: function () {
            },
            error: function (req, status, error) {
                alert("请求处理出错!!!" + error);
            }
        });
    }
</script>
</body>
</html>